<template>
  <div class="hy-form">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-form
      :inline="true"
      :label-width="labelWidth"
      :model="modelValue"
      ref="ruleForm"
    >
      <template v-bind="colLayout">
        <el-form-item
          v-for="item in formItems"
          :key="item.label"
          :label="item.label"
          :rules="item.rules ? item.rules : []"
          :prop="item.field"
        >
          <template v-if="item.type === 'input' || item.type === 'password'">
            <el-input
              :placeholder="item.placeholder"
              :show-password="item.type === 'password'"
              v-bind="item.otherOptions"
              v-model="modelValue[`${item.field}`]"
              @change="handleValueChange($event, item.field)"
            ></el-input>
          </template>
          <template v-else-if="item.type === 'select'">
            <el-select
              :placeholder="item.placeholder"
              v-bind="item.otherOptions"
              v-model="modelValue[`${item.field}`]"
              @change="handleValueChange($event, item.field)"
            >
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :value="option.value"
                :label="option.title"
                >{{ option.title }}</el-option
              >
            </el-select>
          </template>
          <!-- 次联选择器 -->
          <template v-else-if="item.type === 'cascader'">
            <el-cascader
              :placeholder="item.placeholder"
              v-bind="item.otherOptions"
              v-model="modelValue[`${item.field}`]"
              @change="handleValueChange($event, item.field)"
              :options="item.options"
            >
            </el-cascader>
          </template>
          <template v-else-if="item.type === 'datepicker'">
            <el-date-picker
              v-bind="item.otherOptions"
              v-model="modelValue[`${item.field}`]"
              @change="handleValueChange($event, item.field)"
            ></el-date-picker>
          </template>
        </el-form-item>
        <el-form-item>
          <slot name="footer"></slot>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelValue',
    event: 'update:modelValue'
  },
  props: {
    modelValue: {
      type: Object,
      required: true
    },
    formItems: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    itemStyle: {
      type: Object,
      default: () => ({ padding: '10px 40px' })
    },
    colLayout: {
      type: Object,
      default: () => ({
        xl: 6, // >1920px 4个
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      })
    }
  },
  data() {
    return {}
  },
  methods: {
    submitForm() {
      let bool = false
      this.$refs.ruleForm.validate((valid) => {
        bool = valid
      })
      return bool
    },
    handleValueChange(value, field) {
      // console.log(value, field, this.modelValue)

      this.$emit('update:modelValue', { ...this.modelValue, [field]: value })
    }
  }
}
</script>

<style scoped></style>
